<!doctype html>

<html>

	<head>
		<title>oEMBEDit</title>
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
		<script type="text/javascript" src="oembedit.jquery.min.js"></script>
		<script>$(document).ready(function() {$.oembedit();});</script>
		
		<style>
			img {
				width: 300px;
				height: 200px;
			}
			
			.__oem, .__oem object, .__oem embed, .__oem iframe {
				width: 300px;
				height: 202px;
			}
		</style>
	</head>
	
	<body>	
		<p>oEMBEDit</p>
		<p>I've designed oEMBEDit to closely mimic the way a number of sites embed their 
		external content, such as videos. For example on <a href="http://www.facebook.com">Facebook</a>.com, 
		flash videos from <a href="http://www.youtube.com">YouTube</a> are not loaded automatically, the user 
		has to click on the image, then Facebook goes ahead and embed it.
		</p>
		<br />
		
		<h2>Examples:</h2>
		<p>Click on an image to embed the video into the page.</p>
		<div style="overflow:auto; width: 800px; height:250px;">
			<table width="100%" border="0px" style="background-color: #777777;">
				<tr valign="middle" align="center">
					<td>Youtube</td>
					<td><code> &nbsp; <br /> name="youtube|kt_r-jO3lKE|__oem"</code></td>
					<td><img class="oEMBEDit"  name="youtube|kt_r-jO3lKE|__oem" /></td>
				</tr>
				
				<tr valign="middle" align="center">
					<td>Vimeo</td>
					<td><code> &nbsp; <br /> name="vimeo|17942063|__oem"</code></td>
					<td><img class="oEMBEDit"  name="vimeo|17942063|__oem" /></td>
				</tr>
				
				<tr valign="middle" align="center">
					<td>Hulu</td>
					<td><code> &nbsp; <br /> name="hulu|20807|__oem"</code><br />Note: Hulu takes a few seconds longer to load.</td>
					<td><img class="oEMBEDit"  name="hulu|20807|__oem" /></td>
				</tr>
				
				<tr valign="middle" align="center">
					<td>Facebook</td>
					<td><code> &nbsp; <br /> name="facebook|563631939965|__oem"</code></td>
					<td><img class="oEMBEDit"  name="facebook|563631939965|__oem" /></td>
				</tr>			
				
				<tr valign="middle" align="center">
					<td>DailyMotion</td>
					<td><code> &nbsp; <br /> name="dailymotion|x5kyog|__oem"</code></td>
					<td><img class="oEMBEDit"  name="dailymotion|x5kyog|__oem" /></td>
				</tr>
			</table>		
		</div>
		
		<br />
		
		<div style="width:800px;height:500px;background-color:#888888;">
			<div style="color:darkblue;"><h2>Getting Started</h2></div>
			<div><a href="https://code.google.com/p/oembedit/" style="color:#FFFFFF;">https://code.google.com/p/oembedit/</a></div>
		</div>
		
	</body>
	
</html>